<template>
    <div class="login-container">
      <div class="login-card">
        <h1 class="welcome-text">欢迎登录</h1>
        
        <div v-if="isLoginMode">
          <div class="input-group">
            <input type="username" v-model="username" placeholder="请输入账号" />
            <div class="icon">
              <i class="user-icon"></i>
            </div>
          </div>
          
          <div class="input-group">
            <input type="password" v-model="password" placeholder="请输入密码" />
            <div class="icon">
              <i class="lock-icon"></i>
            </div>
          </div>

          <!-- 修改验证码显示部分 -->
          <div class="input-group captcha-group">
            <input type="text" v-model="captcha" placeholder="请输入验证码" maxlength="4" />
            <div class="captcha-image" @click="refreshCaptcha">
              <img :src="captchaUrl" alt="验证码" />
            </div>
          </div>
          
          <div class="options-row">
            <label class="remember-me">
              <input type="checkbox" v-model="rememberMe" />
              <span>记住我</span>
            </label>
            <a href="#" class="forgot-password" @click.prevent="forgotPassword">忘记密码？</a>
          </div>
          
          <button class="login-button" @click="login">登录</button>
          
          <p class="register-link">
            还没有账号？
            <a href="#" @click.prevent="toggleMode">立即注册</a>
          </p>
        </div>
        
        <div v-else>
          <!-- Register Form -->

          
          <div class="input-group">
            <input type="username" v-model="username" placeholder="请输入账号" />
            <div class="icon">
              <i class="mail-icon"></i>
            </div>
          </div>
          
          <div class="input-group">
            <input type="password" v-model="password" placeholder="请输入密码" />
            <div class="icon">
              <i class="lock-icon"></i>
            </div>
          </div>
          
          <div class="input-group">
            <input type="password" v-model="confirmPassword" placeholder="请确认密码" />
            <div class="icon">
              <i class="lock-icon"></i>
            </div>
          </div>
  
          
          <button class="login-button" @click="register">注册</button>
          
          <p class="register-link">
            已有账号？
            <a href="#" @click.prevent="toggleMode">返回登录</a>
          </p>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import { useRouter } from 'vue-router'; // 引入vue-router
  import { verification,registering,loginning,getRole } from '../api/api.js'; 
  import {ElMessage} from 'element-plus'; // 引入Element Plus的消息提示组件
  
  // Form state
  const isLoginMode = ref(true);
  const username = ref('');
  const password = ref('');
  const rememberMe = ref(false);
  const name = ref('');
  const confirmPassword = ref('');
  const verificationCode = ref('');
  const countdown = ref(0);
  const captcha = ref('');
  const captchaUrl = ref('');
  const uuid = ref(''); // 添加uuid存储验证码标识
  const router = useRouter(); // 使用vue-router的useRouter钩子
  
  // Methods
  const toggleMode = () => {
    isLoginMode.value = !isLoginMode.value;
    // Reset form fields when switching modes
    username.value = '';
    password.value = '';
    rememberMe.value = false;
    name.value = '';
    confirmPassword.value = '';
    verificationCode.value = '';
    countdown.value = 0;
    captcha.value = '';
  };
  
  const login = async() => {
    try {
      loginning({
        username: username.value,
        password: password.value,
        verificationCode: captcha.value,
        uuid: uuid.value // 添加uuid
      }).then((res) => {
        console.log('登录成功:', res);
        if (res.data.code==200) {
          ElMessage.success('登录成功！');
          localStorage.setItem('token', res.data.data); 
          getRole(username.value).then((res) => {
            if (res.data.code == 200) {
              localStorage.setItem('permission', res.data.data);
              console.log('角色信息:', res.data);
            } else {
              ElMessage.error('获取权限失败，请重试！');
            }
          })
          



          router.push('/home') 
        } else {
         ElMessage.error('登录失败，请重试！');
        }

      });
      }catch (error) {
        ElMessage.error('登录失败:', error);
      }


//    console.log('Login with:', { 
//      username: username.value, 
//      password: password.value, 
//      rememberMe: rememberMe.value,
//      captcha: captcha.value,
//      uuid: uuid.value // 添加uuid
//    });
  };
  
  const register = () => {
    
      try {
        registering({
          username: username.value,
          password: password.value,
        }).then((res) => {
          console.log('注册成功:', res);
          ElMessage.success('注册成功，请登录！');
          
        });
      }catch (error) {
        console.error('注册失败:', error);
        ElMessage.error('注册失败，请重试！');
      }
      console.log(username.value, password.value);
    
    console.log('Register with:', { 
      username: username.value, 
      password: password.value,

    });
  };
  
  const forgotPassword = () => {

    console.log('Forgot password for:', username.value);
  };

  // 获取验证码图片
  const getCaptcha = async () => {
    try {
      const res = await verification();
      //console.log('验证码图片获取:', res);
      if (res.data.success) {
        captchaUrl.value = `data:image/png;base64,${res.data.data.image}`;
        uuid.value = res.data.data.uuid;
        console.log('验证码图片获取成功:', captchaUrl.value);
        console.log('验证码标识:', uuid.value); // 打印uuid
      }
    } catch (error) {
      console.error('获取验证码失败:', error);
    }
  };

  // 刷新验证码
  const refreshCaptcha = () => {
    getCaptcha();
  };

  onMounted(() => {
    getCaptcha();
  });

  </script>
  
  <style scoped>
  .login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100%;
    background: linear-gradient(
      135deg, 
      #ff9a9e 0%,
      #fad0c4 25%,
      #fad0c4 50%,
      #ffd1ff 75%,
      #a18cd1 100%
    );
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    padding: 20px;
    box-sizing: border-box;
  }
  
  @keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
  
  .login-card {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    padding: 40px 30px;
    width: 100%;
    max-width: 320px;
    box-shadow: 
      0 8px 32px rgba(0, 0, 0, 0.1),
      0 0 0 1px rgba(255, 255, 255, 0.2),
      inset 0 0 32px rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    flex-direction: column;
    gap: 20px;
    transform: translateY(0);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .login-card:hover {
    transform: translateY(-5px);
    box-shadow: 
      0 15px 45px rgba(0, 0, 0, 0.15),
      0 0 0 1px rgba(255, 255, 255, 0.2),
      inset 0 0 32px rgba(255, 255, 255, 0.1);
  }
  
  .welcome-text {
    color: white;
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 20px 0;
    letter-spacing: 1px;
  }
  
  .input-group {
    position: relative;
    margin-bottom: 20px;
  }
  
  .input-group input {
    width: calc(100% - 30px);  /* 减小输入框宽度 */
    padding: 12px 35px 12px 15px;  /* 调整内边距 */
    border-radius: 8px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 16px;
    outline: none;
    transition: all 0.3s;
  }
  
  .input-group input::placeholder {
    color: rgba(255, 255, 255, 0.8);
  }
  
  .input-group .icon {
    position: absolute;
    right: 15px;  /* 调整图标位置 */
    top: 50%;
    transform: translateY(-50%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .user-icon::before {
    content: "👤";
  }
  
  .lock-icon::before {
    content: "🔒";
  }
  
  .mail-icon::before {
    content: "✉️";
  }
  
  .options-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    color: white;
  }
  
  .remember-me {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
  }
  
  .remember-me input {
    cursor: pointer;
  }
  
  .forgot-password {
    color: white;
    text-decoration: none;
    transition: opacity 0.3s;
  }
  
  .forgot-password:hover {
    opacity: 0.8;
  }
  
  .login-button {
    width: 100%;
    padding: 15px;
    border-radius: 50px;
    border: none;
    background: white;
    color: #7367f0;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 10px;
  }
  
  .login-button:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
  }
  
  .register-link {
    text-align: center;
    color: white;
    margin-top: 20px;
  }
  
  .register-link a {
    color: white;
    text-decoration: underline;
    font-weight: 600;
    transition: opacity 0.3s;
  }
  
  .register-link a:hover {
    opacity: 0.8;
  }
  
  .verification-group {
    display: flex;
    gap: 10px;
  }
  
  .verification-group input {
    width: 60%;
  }
  
  .verification-button {
    flex: 1;
    padding: 8px;
    border-radius: 8px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s;
    white-space: nowrap;
  }
  
  .verification-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
  
  .verification-button:not(:disabled):hover {
    background: rgba(255, 255, 255, 0.3);
  }

  .captcha-group {
    display: flex;
    gap: 10px;
    height: 45px; /* 增加高度 */
  }
  
  .captcha-group input {
    width: 55%;
    font-size: 18px; /* 增大字体 */
    letter-spacing: 2px; /* 添加字符间距 */
  }
  
  .captcha-image {
    flex: 1;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    min-width: 120px; /* 设置最小宽度 */
  }
  
  .captcha-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain; /* 改为contain以保持图片比例 */
  }
  </style>